<template>
    <div id = "aft-model" :style = "osWidth">
      <canvas id = "myCanvas" height = "637" :width = "framWidth"></canvas>
      <div id = "scal-0">{{0}}</div>
      <div id = "scal-1">{{rangeUnit}}</div>
      <div id = "scal-2">{{rangeUnit * 2}}</div>
      <div id = "scal-3">{{rangeUnit * 3}}</div>
      <div id = "gain"> GAIN: AUTO </div>
      <div class = "depth">
          {{depthValue}}
        <div class = "unit">m</div>
      </div>
      <div class = "draught"> DRAUGHT :{{draughtValue}}</div>

      <div class = "out-put">
        <div id = "arrow1" v-show = "outPut.value === 'AFT'">
          <img src = "../assets/arrow1.png" width = 15>
        </div>
        <div class = "out-put-name">
          <div style = "color: #D588A2"> AFT </div>
          <div class = "frequence"> {{frequence}}kHz </div>
        </div>
        <div id = "arrow2" v-show = "outPut.value === 'AFT'">
          <img src = "../assets/arrow2.png" width = 15>
        </div>
      </div>
    </div>
</template>

<script>
  import EchoMenu from '../utils/echo-menu'

  function drawLine (x1, y1, x2, y2, color) {
    let c = window.document.getElementById('myCanvas')
    let _paint = c.getContext('2d')
    _paint.beginPath()
    _paint.lineWidth = 2
    _paint.strokeStyle = color
    _paint.moveTo(x1, y1)
    _paint.lineTo(x2, y2)
    _paint.stroke()
  }

  function drawScale () {
    let _width = parseInt(this.framWidth)
    drawLine(_width, 0, _width, 650, '#FFFFFF')
    let unit = 32   //  刻度区间
    let y = 0
    for (let i = 0; i < 19; i++) {
      y += unit
      drawLine(_width, y, _width - 20, y, '#FFFFFF')
    }
    y = 32
    unit *= 5
    for (let i = 0; i < 4; i++) {
      drawLine(_width, y, _width - 40, y, '#FFFFFF')
      y += unit
    }
  }

  function drawdecorate () {
    let _width = parseInt(this.framWidth)
    drawLine(150, 85, _width, 85, '#E22C63')
  }

  export default {
    data () {
      return {
        outPut: EchoMenu.menu[2],
        draught: 0,
        depth: 10,
        frequence: 50
      }
    },
    computed: {
      osWidth: function () {
        return 'width:' + '' + this.framWidth + 'px'
      },
      depthValue: function () {
        if (this.depth % 10 === 0) {
          return this.depth.toString() + '.0'
        }
        return this.depth
      },
      draughtValue: function () {
        if (this.draught % 10 === 0) {
          return this.draught.toString() + '.0'
        }
        return this.draught
      }
    },
    ready () {
      drawScale.call(this)
      drawdecorate.call(this)
    },
    props: {
      framWidth: {
        type: Number
      },
      rangeUnit: {
        type: Number,
        default: 10
      }
    },
    watch: {
      framWidth: function () {
        drawScale.call(this)
        drawdecorate.call(this)
      }
    }
  }
</script>

<style lang = "less">
  #aft-model {
    height: 635px;
    text-align: right;
  }

  #myCanvas {
  }

  #scal-0 {
    position: relative;
    top: -620px;
    left: -60px;
  }

  #scal-1 {
    position: relative;
    top: -480px;
    left: -60px;
  }

  #scal-2 {
    position: relative;
    top: -340px;
    left: -60px;
  }

  #scal-3 {
    position: relative;
    top: -195px;
    left: -60px;
  }

  .depth {
    position: relative;
    top: -300px;
    text-indent: 20px;
    font-size: 70px;
    text-align: left;
  }

  .unit {
    display: inline-block;
    font-size: 50px;
    position: relative;
    left: -30px;
  }

  .draught {
    position: relative;
    top: -300px;
    font-size: 20px;
    text-align: left;
    text-indent: 50px;
  }

  .out-put {
    position: relative;
    top: -895px;
    left: 20px;
    width: 120px;
    border: 1px solid #D588A2;
    text-align: center;
  }

  #arrow1 {
    display: inline-block;
  }

  #arrow2 {
    display: inline-block;
  }

  .out-put-name {
    margin: 0px 10px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
  }
</style>
